<template>
    <view class="container">
        <view class="avatar">
            <image src="/static/images/avatar.png"></image>
        </view>

        <view class="form">
            <u--form labelPosition="left" :model="business" :rules="rules" ref="web">

                <u-form-item label="手机" prop="mobile" borderBottom>
                    <u--input v-model="business.mobile" border="none" placeholder="请输入手机号"></u--input>
                </u-form-item>

                <u-form-item label="密码" prop="password" borderBottom>
                    <u--input type="password" v-model="business.password" border="none" placeholder="请输入密码"></u--input>
                </u-form-item>

                <view style="margin-top: 25px;">
                    <u-button type="warning" @click="submit">注册登录</u-button>
                </view>
            </u--form>
        </view>

        <!-- 提醒组件 -->
        <u-toast ref="notice" />
    </view>
</template>
<script>
export default {
        onReady() {
            // 为了兼容小程序设置验证规则
            this.$refs.web.setRules(this.rules)
        },
        data() {
            return {
                business:{
                    mobile:'13333333333',
                    password:'123123'
                },
                rules: {
                    mobile: [
                        {
                            required: true,
                            message: '请输入手机号码',
                            trigger: ['change','blur']
                        }, {
                            // 自定义验证函数
                            validator: (rule, value, callback) => Uint16Array.$u.test.mobile(value),
                            message: '手机号码格式有误',
                            trigger: ['change','blur']
                        },
                    ],
                    password: {
                        required: true,
                        message: '请输入手机号码',
                        trigger: ['change','blur']
                    }
                }
            }
        },
        methods: {
            submit()
            {
                //只有当满足校验规则时才发起请求
                this.$refs.web.validate().then(async res => {
                    var result = await uni.$u.http.post('/business/web', this.business)

                    if (result.code == 0) {
                        this.$refs.notice.show({
                            type: 'error',
                            message:result.msg
                        })

                        return false
                    } else {
                        this.$refs.notice.show({
                            type: 'success',
                            message: result.msg,
                            complete() {
                                // 本地存储
                                uni.setStorageSync('business', result.data)

                                // 返回上一个界面
                                uni.$u.route({
                                    type: 'back',
                                    delta:1
                                })
                            }
                        })
                    }
                }).catch(error => {
                    this.$refs.notice.show({
                        type: 'error',
                        message:'表单校验失败'
                    })
                })
            },
        },
    }
</script>

<style>
    page{
        background-color: #f8fafe;
    }

    .container .avatar {
        text-align: center;
        background-color: #fff;
    }

    .avatar image{
        width: 120px;
        height: 120px;
        margin: 50px 0;
        border-radius: 50%;
    }

    .form{
        margin: 0 50rpx;
        box-sizing: border-box;
    }

    .btn{
        margin-top: 25px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .u-icon{
        margin-left: 10px;
    }
</style>
